<template>
	<div>Child子集组件</div>
	<h3>msg: {{ msg }}</h3>
	<!-- <h3>count: {{ count }}</h3> -->
</template>

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
	name: "Child",
	props: ["msg"],
	// setup细节问题：

	// setup在执行的时候，当前的组件还没有渲染出来，也就意味着组件实例的this根本不能使用
	// this是undefined就说明不能再执行的时候，调用data,computed,methods，props的相关属性内容！
	// setup是在beforeCreate生命周期之前执行，而且只执行了一次！
	// 其实所有的composition API相关回调函数中也都不可以

	// 一般都返回一个对象: 为模板提供数据, 也就是模板中可以直接使用此对象中的所有属性/方法
	// 返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性
	// 返回对象中的方法会与methods中的方法合并成功组件对象的方法
	// 如果有重名, setup优先
	// vue3中尽量不要混合使用data和setup ，setup与methods
	// setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性数据

	beforeCreate() {
		console.log("beforeCreate执行了...")
	},

	setup(props, content) {
		console.log("setup执行了", this)
		const showMsg1 = () => {
			console.log("setup中的showMsg1方法")
		}
		return {
			// setup中一般都是返回一个对象，对象中的属性和方法都可以直接在html中进行使用！
			showMsg1
		}
	}
	// data() {
	// 	return {
	// 		count: 10
	// 	}
	// },
	// methods: {
	// 	showMsg2() {
	// 		console.log("methods中的showMsg2方法")
	// 	}
	// },
	// // 界面渲染后的生命周期回调
	// mounted() {
	// 	console.log(this)
	// }
})
</script>
